﻿<template>
  <div v-loading = 'loading' :element-loading-text = 'loadingText'>
    <V-Title :titleName = 'titleName'></V-Title>
    <div class = 'page_mainContent'>
      <!-- 表格部分 -->
      <el-form :model = 'ruleForm' :rules='rules' ref = 'ruleForm'>
        <div class = 'page_tableContent'>
          <el-table :data = 'ruleForm.tableData' style = 'width:100%' empty-text = '暂无数据，请点击右上方按钮添加' border stripe>
            <el-table-column :min-width = "item.ui_type === 'Calendar' ? 180 : 120" align='center' v-for = 'item in ruleForm.tableColumn'
            :key = 'item.column_name' :label = 'item.column_desc'
            :render-header = "item.check_required ? handelHelpKey : handelHelp" :label-class-name = 'item.tips'>
              <template slot-scope='scope'>
                <el-form-item :prop = "'tableData[' + scope.$index + '][' + item.column_name + ']'" :rules = 'rules[item.column_name]'>
                  <!-- 富文本 -->
                  <span v-if = "item.ui_type === 'RichText' || item.ui_type === 'MD' || item.ui_type === 'JSONEditor'" class = "editStatus"
                  @click = "(operationType !== 'edit' && (scope.row.newData !== 'newData')) ? showTableCloumn(item, scope.row, scope.$index) : editTableCloumn(item, scope.row, scope.$index)">......</span>
                  <!-- 文件 -->
                  <span v-else-if = "item.ui_type === 'File'" class = "editStatus"
                  @click = "(operationType !== 'edit' && (scope.row.newData !== 'newData')) ? showTableCloumn(item, scope.row, scope.$index) : editTableCloumn(item, scope.row, scope.$index)"><i class='el-icon-document'></i></span>
                  <!-- 图片 -->
                  <span v-else-if="item.ui_type === 'Picture'" class = "editStatus"
                  @click = "(operationType !== 'edit' && (scope.row.newData !== 'newData')) ? showTableCloumn(item, scope.row, scope.$index) : editTableCloumn(item, scope.row, scope.$index)"><i class='el-icon-picture'></i></span>
                  <!-- 下拉框 -->
                  <el-select :disabled = "(operationType !== 'edit' && operationType !== 'add') || (operationType === 'add' && scope.row.newData !== 'newData')"
                  @focus = 'getSelect(item.column_name)' filterable v-else-if = "item.ui_type === 'Select'" clearable v-model = 'scope.row[item.column_name]' placeholder='请选择'>
                    <el-option v-for = '(selectItem, select$Index) in selectOptions[item.column_name]' :key = 'select$Index' :label = "selectItem[showValue[item.column_name]]"
                    :value = 'selectItem[selectValue[item.column_name]]'></el-option>
                  </el-select>
                  <!-- 日期 -->
                  <el-date-picker value-format = 'yyyy-MM-dd HH:mm:ss' :disabled = "(operationType !== 'edit' && operationType !== 'add') || (operationType === 'add' && scope.row.newData !== 'newData')"
                  v-else-if = "item.ui_type === 'Calendar'" v-model='scope.row[item.column_name]' type="datetime" placeholder="选择日期"></el-date-picker>
                  <!-- 滑块 -->
                  <el-switch :disabled = "(operationType !== 'edit' && operationType !== 'add') || (operationType === 'add' && scope.row.newData !== 'newData')"
                  v-else-if = "item.ui_type === 'Switch'" v-model = 'scope.row[item.column_name]'></el-switch>
                  <!-- pop弹框 -->
                  <el-input readonly @focus = "(operationType !== 'edit' && (scope.row.newData !== 'newData')) ? showTableCloumn(item, scope.row, scope.$index) : editTableCloumn(item, scope.row, scope.$index)"
                  v-else-if = "item.ui_type === 'Pop'" v-model = 'scope.row[item.column_name]' placeholder='请选择'></el-input>
                  <!-- map和pic -->
                  <el-input :disabled = "(operationType !== 'edit' && operationType !== 'add') || (operationType === 'add' && scope.row.newData !== 'newData')"
                  v-else-if = "item.ui_type === 'PicXY' || item.ui_type === 'MapXY'" v-model = 'scope.row[item.column_name]' placeholder = '请输入'>
                    <template slot = "append">
                      <span @click = "(operationType !== 'edit' && (scope.row.newData !== 'newData')) ? showTableCloumn(item, scope.row, scope.$index) : editTableCloumn(item, scope.row, scope.$index)">
                        <i class='iconfont icon-search'></i>
                      </span>
                    </template>
                  </el-input>
                  <!-- 输入框 -->
                  <el-input :disabled = "(operationType !== 'edit' && operationType !== 'add') || (operationType === 'add' && scope.row.newData !== 'newData')"
                  v-else v-model = 'scope.row[item.column_name]' placeholder = '请输入'></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label = "操作" align = "center" width = '120'>
              <template slot-scope = "scope">
                <el-button type = 'text' :disabled = "operationType === 'edit' || (operationType === 'add' && scope.row.newData !== 'newData')" @click="handleSingleDelete(scope.row, scope.$index)"><i class='iconfont icon-shanchu'></i>删除</el-button>
                <el-dropdown class = 'tableDropdown' @command = "handleCommand" v-if = 'rowEventsList.length'>
                  <span class = "el-dropdown-link">
                    更多<i class = "el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot = "dropdown" class='dropdownMenu'>
                    <el-dropdown-item :divided = "index === 0 ? false : true" v-for = '(item, index) in rowEventsList' :key = 'index'
                    :command = "{'eventsNo': item.no, 'rowData': JSON.stringify(scope.row)}"
                    :disabled = "operationType === 'edit' || operationType === 'add'">
                      <i class='iconfont icon-bianji'></i>
                      <span>{{item.name.slice(0, 4)}}</span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 底部按钮和页码部分 -->
        <div class = 'page_bottomContent'>
          <div class = 'page_btnsContent'>
            <el-form-item class = 'form_noLeftMargin'>
              <el-button v-show = "searchList.length && operationType !== 'edit' && operationType !== 'add'"
              @click = "openSearchDialog()" type = "primary">检 索</el-button>
              <el-button v-show = "operationType !== 'edit'" @click="addData()" type="primary">添 加</el-button>
              <el-button v-show = "operationType !== 'edit' && operationType !== 'add'" @click = "editData()" type = "primary">编 辑</el-button>
              <el-button v-show = "operationType === 'edit' || operationType === 'add'" @click = "resetForm ('ruleForm')" type = "primary">取 消</el-button>
              <el-button v-show = "operationType === 'edit' || operationType === 'add'" type = "primary" @click = "submitForm ('ruleForm', operationType)">确 定</el-button>
              <el-dropdown v-show = "operationType !== 'edit' && operationType !== 'add'" class = 'slef_dropDown' @command = "handleCommand">
                <el-button type = "primary">
                  更 多<i class = "el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot = "dropdown" class = 'dropdownMenu'>
                  <el-dropdown-item command = "downloadTem">
                    <i class = 'iconfont icon-icon--'></i>
                    <span>下载模板</span>
                  </el-dropdown-item>
                  <el-dropdown-item divided command="downloadData">
                    <i class='iconfont icon-daochu'></i>
                    <span>导出数据</span>
                  </el-dropdown-item>
                  <el-dropdown-item divided command="importData">
                    <i class='iconfont icon-shangchuan'></i>
                    <span>导入数据</span>
                  </el-dropdown-item>
                  <el-dropdown-item divided v-for='(item, index) in eventsList' :key='index' :command="{'eventsNo': item.no, 'rowData': ''}">
                    <i class='iconfont icon-bianji'></i>
                    <span>{{item.name.slice(0, 4)}}</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-form-item>
          </div>
          <div class = 'page_paginationContent'>
            <el-pagination styl e= 'text-align:right;padding:15px 0 25px 0'
            background
            @size-change = "handleSizeChange"
            @current-change = "handleCurrentChange"
            :current-page.sync = "currentPage"
            :page-size = 'pageSize'
            :page-sizes = "[10, 25, 50, 100]"
            :pager-count = "5"
            layout = "total, sizes, prev, pager, next"
            :total = 'totalLength'
            v-if = "operationType !== 'edit' && operationType !== 'add' && totalLength" >
            </el-pagination>
          </div>
        </div>
      </el-form>
    </div>
    <!-- 检索的功能 -->
    <el-dialog v-drag title = '检索' :visible.sync = 'searchDialog' width='40%' @close = "closeSearchDialog">
      <el-form :model = "searchRuleForm" :rules = 'searchRules' ref = 'searchRuleForm' label-width = "80px">
        <el-form-item v-for = '(item, index) in searchList' :key='index' :label = 'item.search_desc'>
          <el-col :span = "Math.floor((26 - item.conditions.length * 2) / item.conditions.length)" :offset = "sIndex === 0 ? 0 : 2"
          v-for = '(sItem, sIndex) in item.conditions' :key = 'sIndex'>
            <el-form-item :prop = "sItem.parameter_name">
              <!-- 日期 -->
              <el-date-picker v-if = "sItem.ui_type === 'Calendar'" value-format = 'yyyy-MM-dd HH:mm:ss'
              v-model='searchRuleForm[sItem.parameter_name]' type="datetime" placeholder = "选择日期"></el-date-picker>
              <!-- 滑块 -->
              <el-switch v-else-if = "sItem.ui_type === 'Switch'"
              v-model = 'searchRuleForm[sItem.parameter_name]'></el-switch>
              <!-- 下拉框 -->
              <el-select filterable v-else-if = "sItem.ui_type === 'Select' || sItem.ui_type === 'Pop'" clearable
              @focus = 'getSelect(sItem.column_name)' v-model = 'searchRuleForm[sItem.parameter_name]' placeholder = '请选择'>
                <el-option v-for = '(selectItem, select$Index) in selectOptions[sItem.column_name]' :key = 'select$Index' :label = "selectItem[showValue[sItem.column_name]]"
                :value = 'selectItem[selectValue[sItem.column_name]]'></el-option>
              </el-select>
              <!-- 输入框 -->
              <el-input v-else v-model = 'searchRuleForm[sItem.parameter_name]' placeholder = '请输入'></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item class = 'form_noLeftMargin'>
          <el-button type="primary" @click="submitSearch('searchRuleForm')">检 索</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 引入部分编辑的弹窗 -->
    <V-Edit :showEditDialog = 'showEditDialog' :editInfo = 'editInfo' @giveUp = 'showEditDialog=false' @sureEdit = 'sureEdit'></V-Edit>
    <!-- 引入选择栏位的弹窗 -->
    <V-Columns :showColumnsDialog = 'showColumnsDialog' :columns = 'ruleForm.tableColumn' @giveUpColumns = 'showColumnsDialog = false' @sureSelectColumns = 'sureSelectColumns'></V-Columns>
    <!-- 引入上传文件的弹窗 -->
    <V-Import :showUploadDialog = 'showUploadDialog' :funUid = 'funUid' @closeUploadDialog = 'closeUploadDialog'></V-Import>
  </div>
</template>

<script src='./maintainMenu.js'></script>
